<script setup>
// 引入了 computed计算属性函数

// 计算属性  解决了就是 在显示时需要大量的计算后得到的结果 看起来比较臃肿 或者多次使用这个计算后的结果
import {ref, reactive, computed} from 'vue'

// 定义了一个响应式对象
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref

// 计算属性值会基于其响应式依赖被缓存
const publishedBooksMessage = computed(() => {
  console.log(1)
  return author.books.length > 0 ? 'Yes' : 'No'
})

// 我们同样可以使用函数实现同样的效果
function calculateBooksMessage() {
  console.log(2)
  return author.books.length > 0 ? 'Yes' : 'No'
}


const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

// console.log(fullName.value);

</script>

<template>
  <p>Has published books:</p>
  <!--  通过计算属性来进行显示-->
  <span>{{ publishedBooksMessage }}</span>
  <span>{{ publishedBooksMessage }}</span>
  <!--  通过函数来进行显示-->
  <p>{{ calculateBooksMessage() }}</p>
  <p>{{ calculateBooksMessage() }}</p>

  <p>{{ fullName }}</p>
</template>


<style scoped>

</style>
